<template>
    <div class="main-scrollbar">
        <el-form class="form" :model="formData" label-width="auto">
            <el-row type="flex" :gutter="10">
                <el-col :spam="24">
                    <el-form-item label="活动名称" prop="activity_name">
                        <el-input
                            v-model="formData.activity_name"
                            style="width:300px"
                            placeholder="最多15个汉字"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :spam="24">
                    <el-form-item label="发放时间" prop="granttime">
                        <el-radio-group v-model="dateLabel">
                            <el-radio label="1">立即发放</el-radio>
                            <el-radio label="2">定时发放</el-radio>
                        </el-radio-group>
                        <div class="datetime">
                            <el-date-picker
                                type="date"
                                v-model="formData.granttime"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :disabled="dateLabel === '1'"
                            ></el-date-picker>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :spam="24">
                    <el-form-item label="发放对象">
                        <el-radio-group v-model="formData.granttype">
                            <el-radio label="1">选择客户</el-radio>
                            <el-radio label="2">全部客户</el-radio>
                            <el-radio label="3">指定人群</el-radio>
                        </el-radio-group>
                        <div class="table" v-if="formData.granttype === '1'">
                            <div class="table-top">
                                <el-button type="primary" @click="selectMember"
                                    >选择客户</el-button
                                >
                                <el-button
                                    type="danger"
                                    :disabled="memberSelection.length < 1"
                                    @click="deleteMember"
                                    >移除客户</el-button
                                >
                                <div class="table-tips">
                                    若所选多个人群存在重复人员时，将不会对该人员进行重复发放。
                                </div>
                            </div>
                            <el-table
                                ref="tableOfMember"
                                :data="memberData"
                                border
                                header-cell-class-name="main-table-header"
                                @selection-change="onMemberSelectionChange"
                                @row-click="onMemberRowClick"
                            >
                                <el-table-column
                                    type="selection"
                                    width="39"
                                ></el-table-column>
                                <el-table-column
                                    align="center"
                                    label="客户名称"
                                    prop="name"
                                />
                                <el-table-column
                                    align="center"
                                    label="病历号"
                                    prop="medicalNo"
                                />
                                <el-table-column
                                    width="100px"
                                    align="center"
                                    label="电话号码"
                                    prop="mainPhone"
                                />
                                <el-table-column
                                    align="center"
                                    label="会员等级"
                                    prop="memberLevelName"
                                />
                            </el-table>
                        </div>
                        <div class="table" v-if="formData.granttype === '3'">
                            <div class="table-top">
                                <el-button
                                    type="primary"
                                    @click="selectMemberGroup"
                                    >选择人群</el-button
                                >
                                <el-button
                                    type="danger"
                                    :disabled="memberGroupSelection.length < 1"
                                    @click="deleteMemberGroup"
                                    >移除人群</el-button
                                >
                                <div class="table-tips">
                                    若所选多个人群存在重复人员时，将不会对该人员进行重复发放。
                                </div>
                            </div>
                            <el-table
                                ref="tableOfMemberGroup"
                                :data="memberGroupData"
                                header-cell-class-name="table-header"
                                border
                                @selection-change="changeMemberGroupSelection"
                                @row-click="clickMemberGroup"
                            >
                                <el-table-column
                                    type="selection"
                                    width="39"
                                ></el-table-column>
                                <el-table-column align="center" label="标题">
                                    <template slot-scope="{ row }">
                                        {{ row.rfmType | formatRFMType }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    label="数量"
                                    prop="count"
                                />
                            </el-table>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :spam="24">
                    <el-form-item label="赠送优惠券">
                        <div class="table" style="margin-top:0;">
                            <div class="table-top">
                                <el-button type="primary" @click="addCoupon"
                                    >添加优惠券</el-button
                                >
                                <el-button
                                    type="danger"
                                    :disabled="couponSelection.length < 1"
                                    @click="removeCoupon"
                                    >移除优惠券</el-button
                                >
                                <div class="table-tips">
                                    最多支持添加15张优惠券
                                </div>
                            </div>
                            <el-table
                                ref="tableOfCoupon"
                                :data="couponData"
                                border
                                header-cell-class-name="main-table-header"
                                @selection-change="changeCouponSelection"
                                @row-click="clickCoupon"
                            >
                                <el-table-column
                                    type="selection"
                                    width="39"
                                ></el-table-column>
                                <el-table-column
                                    label="名称"
                                    align="center"
                                    prop="coupon_name"
                                ></el-table-column>
                                <el-table-column
                                    label="价值"
                                    align="center"
                                    prop="coupon_money"
                                ></el-table-column>
                                <el-table-column
                                    label="可用门店"
                                    align="center"
                                    prop="ship_note"
                                ></el-table-column>
                                <el-table-column
                                    label="发放数量"
                                    align="center"
                                    prop="coupon_num"
                                ></el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :spam="24">
                    <el-form-item label="通知方式" prop="noticetype">
                        <el-checkbox
                            label="短信"
                            v-model="formData.noticetype"
                            :true-label="1"
                            :false-label="0"
                        ></el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-button type="primary" @click="submit">提交</el-button>
            </el-row>
        </el-form>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            append-to-body
            width="800px"
        >
            <component
                :is="dialogView"
                @select-member="selectMemberResult"
                @select-member-group="selectMemberGroupResult"
                @select-coupon="selectCoupon"
            ></component>
        </el-dialog>
    </div>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "view-issue-coupons",
    data() {
        return {
            memberSelection: [],
            memberGroupSelection: [],
            memberData: [],
            memberGroupData: [],
            couponData: [],
            couponSelection: [],
            dateLabel: "1",
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
            formData: {
                activity_name: "",
                granttime: "",
                granttype: "1",
                userids: "",
                rfmtype: "",
                couponids: "",
                noticetype: 1
            }
        };
    },
    computed: {
        memberIds() {
            return this.memberData.map(item => item.id);
        },
        memberGroupTypes() {
            return this.memberGroupData.map(item => item.rfmType);
        },
        couponIds() {
            return this.couponData.map(item => item.id);
        }
    },
    components: {
        SelectMember: () => import("./select-member.vue"),
        SelectMemberGroup: () => import("./select-member-group.vue"),
        SelectCoupon: () => import("./select-coupon.vue")
    },
    filters: {
        formatRFMType(rfmType) {
            if (rfmType === 0) {
                return "沉睡客户";
            } else if (rfmType === 1) {
                return "体验客户";
            } else if (rfmType === 2) {
                return "需刺激客户";
            } else if (rfmType === 3) {
                return "潜力客户";
            } else if (rfmType === 4) {
                return "重要挽留客户";
            } else if (rfmType === 5) {
                return "重要发展客户";
            } else if (rfmType === 6) {
                return "重要唤回客户";
            } else if (rfmType === 7) {
                return "高价值客户";
            }
        }
    },
    methods: {
        async submit() {
            const formData = JSON.parse(JSON.stringify(this.formData));
            if (!formData.activity_name) {
                this.$message.error("活动名称不能为空");
                return;
            }
            if (this.dateLabel === "2" && !formData.granttime) {
                this.$message.error("定时发放时间不能为空");
                return;
            }
            if (formData.granttype === "1" && this.memberIds.length === 0) {
                this.$message.error("发放客户不能为空");
                return;
            }
            if (
                formData.granttype === "3" &&
                this.memberGroupTypes.length === 0
            ) {
                this.$message.error("发放人群不能为空");
                return;
            }
            // if (formData.noticetype != 1) {
            //     this.$message.error("请选择通知方式");
            //     return;
            // }
            formData.granttime = new Date(formData.granttime).getTime() / 1000;
            formData.userids = this.memberIds.join(",");
            formData.couponids = this.couponIds.join(",");
            formData.rfmtype = this.memberGroupTypes.join(",");
            await post({
                url: "/admin/shop.couponActivity/add",
                data: formData,
                successTip: true,
                loading: true
            });
            this.$router.back();
        },
        addCoupon() {
            this.dialogTitle = "新增优惠券";
            this.dialogView = "SelectCoupon";
            this.dialogVisible = true;
        },
        changeMemberGroupSelection(selection) {
            this.memberGroupSelection = selection;
        },
        clickMemberGroup(row) {
            this.$refs.tableOfMemberGroup.toggleRowSelection(row);
        },
        deleteMemberGroup() {
            if (this.memberGroupSelection.length === 0) {
                this.$message.error("请先选择要移除的人群");
                return;
            }
            this.$confirm(`确认移除选中的人群?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.memberGroupSelection.forEach(sitem => {
                        const index = this.memberGroupData.findIndex(
                            mitem => sitem.id === mitem.id
                        );
                        this.memberGroupData.splice(index, 1);
                    });
                })
                .catch(() => {
                    this.$refs.tableOfMemberGroup.clearSelection();
                });
        },
        selectMemberGroupResult(selection) {
            const result = selection.filter(item => {
                return (
                    this.memberGroupData.findIndex(
                        sitem => sitem.rfmType === item.rfmType
                    ) === -1
                );
            });
            this.memberGroupData = this.memberGroupData.concat(result);
        },
        selectMemberGroup() {
            this.dialogTitle = "选择人群";
            this.dialogView = "SelectMemberGroup";
            this.dialogVisible = true;
        },
        deleteMember() {
            if (this.memberSelection.length === 0) {
                this.$message.error("请先选择要移除的客户");
                return;
            }
            this.$confirm(`确认移除选中的客户?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.memberSelection.forEach(sitem => {
                        const index = this.memberData.findIndex(
                            mitem => sitem.id === mitem.id
                        );
                        this.memberData.splice(index, 1);
                    });
                })
                .catch(() => {
                    this.$refs.tableOfMember.clearSelection();
                });
        },
        removeCoupon() {
            if (this.couponSelection.length === 0) {
                this.$message.error("请先选择要移除的优惠券");
                return;
            }
            this.$confirm(`确认移除选中的优惠券?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.couponSelection.forEach(sitem => {
                        const index = this.couponData.findIndex(
                            mitem => sitem.id === mitem.id
                        );
                        this.couponData.splice(index, 1);
                    });
                })
                .catch(() => {
                    this.$refs.tableOfCoupon.clearSelection();
                });
        },
        selectMember() {
            this.dialogTitle = "选择客户";
            this.dialogView = "SelectMember";
            this.dialogVisible = true;
        },
        selectMemberResult(selection) {
            const result = selection.filter(item => {
                return (
                    this.memberData.findIndex(sitem => sitem.id === item.id) ===
                    -1
                );
            });
            this.memberData = this.memberData.concat(result);
        },
        selectCoupon(selection) {
            const result = selection.filter(item => {
                return (
                    this.couponData.findIndex(sitem => sitem.id === item.id) ===
                    -1
                );
            });
            this.couponData = this.couponData.concat(result);
        },
        onMemberSelectionChange(selection) {
            this.memberSelection = selection;
        },
        onMemberRowClick(row) {
            this.$refs.tableOfMember.toggleRowSelection(row);
        },
        changeCouponSelection(selection) {
            this.couponSelection = selection;
        },
        clickCoupon(row) {
            this.$refs.tableOfCoupon.toggleRowSelection(row);
        }
    }
};
</script>

<style scoped>
.form {
    box-sizing: border-box;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
}

.datetime {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
}

.table {
    margin-top: 20px;
}

.table-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.table-add {
    color: #409eff;
    font-size: 16px;
    cursor: pointer;
}

.table-delete {
    color: #f56c6c;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

.table-tips {
    color: rgb(173, 173, 173);
    font-size: 14px;
    margin-left: 20px;
}

::v-deep .table-header {
    background-color: rgb(247, 248, 250) !important;
    color: #000;
}
</style>